<template name="massageDetails">
  <view class="wrap-container">
    <uni-nav-bar
      fixed
      title="消息详情"
      status-bar
      left-icon="left"
      background-color="#2163e0"
      color="#fff"
      @clickLeft="back"
    />
    <view class="content-wrap">
      <view class="title">{{ details.dynamicTitle }}</view>
      <view class="content">{{ details.dynamicContent }}</view>
      <view class="img-list">
        <image class="mimg" v-for="item in details.hyDynamicImgList" :key="item.id" :src="item.dynamicImg" lazy-load />
      </view>
      <view class="desc-list">
        <view class="desc-item">
          <view class="label">需求部门:</view>
          <view class="value">{{ details.deptDemandName }}</view>
        </view>
        <view class="desc-item">
          <view class="label">协助部门:</view>
          <view class="value">{{ details.deptHelpName }}</view>
        </view>
        <view class="desc-item">
          <view class="label">完成时间:</view>
          <view class="value"> {{ details.dynamicFinishTime }} </view>
        </view>
      </view>
      <view class="btn-wrap">
        <uni-grid :column="2" :showBorder="false" highlight>
          <uni-grid-item>
            <view class="grid-item-box" style="background-color: #fff" @click="like">
              <uni-icons type="hand-up" :size="30" color="#777" />
              <text class="text">{{details.dynamicThumbs}}</text>
            </view>
          </uni-grid-item>
          <!-- <uni-grid-item>
            <view class="grid-item-box" style="background-color: #fff">
              <uni-icons type="redo" :size="30" color="#777" />
              <text class="text">分享</text>
            </view>
          </uni-grid-item> -->
        </uni-grid>
      </view>
      <view class="redo">
        <view class="redo-item">
          <text class=""> 评价: </text>
          <uni-rate :value="details.dynamicMark" />
        </view>
        <view class="redo-item">
          <text class=""> 建议: </text>
          <view>{{ details.dynamicAdvice }}</view>
        </view>
      </view>

      <!-- <uni-rate v-model="value" @change="onChange" /> -->
    </view>
  </view>
</template>
<script>
import * as api from '@/api/api';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: 'massageDetails',
  components: {},
  data() {
    return {
      details: {},
      did: ''
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad(e) {
    this.did = e.id
    this.getDetail()
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getDetail() {
      api.queryById({id: this.did}).then(({ data: e }) => {
        if (e.success) {
          this.details = e.result
        }
      })
    },
    like() {
      api.thumbsUp({dynamicId: this.did}).then(({ data: e }) => {
        if (e.success) {
          uni.showToast({
            title: e.message,
            icon: 'success',
            duration: 1000
          });
          this.getDetail()
        } else {
          uni.showToast({
            title: e.message,
            icon: 'warning',
            duration: 1000
          });
        }
      })
    }
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.wrap-container {
  display: inline-block;
  position: relative;
  padding: 0 40upx 40upx 40upx;
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  .content-wrap {
    padding-top: 40upx;
  }
  .content {
    min-height: 200upx;
  }
  .title {
    margin-bottom: 20upx;
    font-size: 32upx;
  }
}
.img-list {
  margin-top: 20upx;
}
.mimg {
  margin-right: 20upx;
  width: 160upx;
  height: 160upx;
}
.desc-list {
  margin-top: 20upx;
  color: #666;
  .desc-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .label {
      text-align: right;
      flex-shrink: 0;
      min-width: 100upx;
    }
    .value {
      margin-left: 16upx;
      flex-grow: 1;
    }
  }
}
.btn-wrap {
  margin: 40upx auto;
  width: 300upx;
  height: 120upx;
}
.grid-item-box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .text {
    line-height: 34upx;
    height: 30upx;
  }
}
.redo {
  border-top: 1px solid #ddd;
  padding-top: 40upx;
  .redo-item {
    margin: 20upx 0;
    display: flex;
    align-items: center;
    text {
      margin-right: 20upx;
    }
  }
}
</style>
